<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        body {
            background-color: #dddd;
        }
        .container {
            width: 1170px;
            margin: auto;
        }

        header {
            padding: 23px 0;
            background-color: #fff;
        }

        header .container {
            display: flex;
        }

        header h1 {
            width: 54px;
            height: 54px;
            background-color: green;
        }

        header ul {
            flex-grow: 1;
            background-color: #ff0;
            display: flex;
            line-height: 54px;
        }

        header ul li {
            margin-left: 40px;
        }

        header p {
            background-color: #f00;
            display: flex;
            align-items: center;
        }

        header p i {
            margin-right: 5px;
        }

        header p span {
            margin-right: 5px;
        }

        /* .banner img {
            width: 100%;
        } */
        .banner {
            height: 400px;
            background: url(../images/index_02.jpg) center center no-repeat;
            background-size: auto 100%;
        }

        main {
            /* background-color: #ff0; */
            height: 400px;
            margin-top: -100px;
        }

        .data {
            height: 200px;
            background-color: #fff;
            /* position: relative;    */
            /* 保留原有位置，飘出来 */
            /* transform: translate(0); */
        }
    </style>
</head>

<body>

    <!-- 
        1 banner 插入图片    main使用margin-top负数    data使用相对定位或者位移0(飘飘起来且保留原有位置)

        2 body背景颜色    banner背景图(背景图居中)     main使用margin-top负数(不写背景，背景写在body上)  data正常写
     -->




    <header>
        <div class="container">
            <h1>1</h1>
            <ul>
                <li>
                    <a href="">首页</a>
                </li>
                <li>
                    <a href="">首页</a>
                </li>
                <li>
                    <a href="">首页</a>
                </li>
                <li>
                    <a href="">首页</a>
                </li>
                <li>
                    <a href="">首页</a>
                </li>
            </ul>
            <p>
                <i>图</i>
                <span>ios</span>
                <i>图</i>
                <span>android</span>
            </p>
        </div>
    </header>

    <div class="banner">
        <!-- <img src="../images/index_02.jpg" alt=""> -->
    </div>

    <main>
        <div class="container">
            <div class="data">222222222222</div>
        </div>
    </main>


</body>

</html>